require('../styles/bootstrap.css');
require('../styles/musiclistitem.css');

import React from 'react';
import Pubsub from 'pubsub-js';


class MusicListItem extends React.Component {
		constructor(props) {
			super(props);
			this.playMusic = this.playMusic.bind(this);
			this.deleteMusic = this.deleteMusic.bind(this);
		}
		playMusic(musicItem) {
			Pubsub.publish('PLAY_MUSIC', musicItem);
		}
		deleteMusic(musicItem, e) {
			e.stopPropagation();
			Pubsub.publish('DELETE_MUSIC', musicItem);
		}
	render() {
		var focusClassName=this.props.focus?'col-md-11 focus':'col-md-11';
		var musicItem=this.props.musicListItem;
		return (
			<li onClick={this.playMusic.bind(this,musicItem)} className="row"  style={{paddingLeft:'20px'}}>
			  <span className={focusClassName}>
			    <strong>{this.props.musicListItem.title}</strong>&nbsp;-&nbsp;
			    {this.props.musicListItem.artist}
			  </span>
			  <span onClick={this.deleteMusic.bind(this,musicItem)} className="col-md-1 glyphicon glyphicon-remove" style={{textAlign:'right',paddingTop:'5px'}}>&nbsp;</span>
			</li>
			);
	}
}


MusicListItem.defaultProps={};

export default MusicListItem;